/*
 * @Author: hcluo
 * @Date: 2020-07-20 20:27:24
 * @LastEditors: hcluo
 * @LastEditTime: 2020-07-22 21:02:05
 */
import {
	ToyReact,
	Component
} from './ToyReact';

class MyComponent extends Component {
	render() {
		return (<div >
			<span > hello </span>
			<span > world </span>
			<div > 12 </div>
		</div >
		);
	}
}

class Square extends Component {

	constructor(props) {
		super(props)
		this.state = { value: null }
	}

	render() {

		return (
			<button className="square" onClick={() => this.setState({ value: this.props.value })}>
				{this.props.value}
			</button>
		)
	}
}

class Board extends Component {

	renderSquare(i) {
		return (
			<Square
				value={i}
				onClick={() => this.props.onClick(i)}
			/>
		);
	}

	render() {
		return (
			<div>
				<div className="board-row">
					{this.renderSquare(0)}
					{this.renderSquare(1)}
					{this.renderSquare(2)}
				</div>
				<div className="board-row">
					{this.renderSquare(3)}
					{this.renderSquare(4)}
					{this.renderSquare(5)}
				</div>
				<div className="board-row">
					{this.renderSquare(6)}
					{this.renderSquare(7)}
					{this.renderSquare(8)}
				</div>
			</div>
		);
	}
}

let a = <Board onClick={(i) => console.log(i)} />;

console.log('%c 🦐 ToyReact.render: ', 'font-size:20px;background-color: #FCA650;color:#fff;', ToyReact.render);
ToyReact.render(a, document.body);